.container {
  display: flex;
  height: 86vh;
  width: 100%;
  background-color: #f5f5f5;

  .left {
    width: 260px;
    background-color: #2d2d2d;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #404040;

    .new-chat-btn {
      padding: 12px 16px;
      margin: 12px;
      background-color: #3d3d3d;
      color: #fff;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      font-size: 14px;
      transition: background-color 0.2s;

      &:hover {
        background-color: #4d4d4d;
      }
    }

    .conversation-list {
      flex: 1;
      overflow-y: auto;
      padding: 0 12px;

      .conversation-item {
        padding: 12px 16px;
        margin-bottom: 4px;
        background-color: #3d3d3d;
        color: #e0e0e0;
        border-radius: 8px;
        cursor: pointer;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: background-color 0.2s;

        &:hover {
          background-color: #4d4d4d;
        }

        &.active {
          background-color: #4a9eff;
          color: #fff;
        }
      }
    }
  }

  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #fff;

    .output {
      flex: 1;
      overflow-y: auto;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;

      .empty-state {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #999;
        font-size: 16px;
      }

      .message {
        display: flex;
        margin-bottom: 8px;

        .message-content {
          max-width: 70%;
          padding: 12px 16px;
          border-radius: 12px;
          line-height: 1.6;
          white-space: pre-wrap;
          word-wrap: break-word;
        }

        &.user-message {
          justify-content: flex-end;

          .message-content {
            background-color: #4a9eff;
            color: #fff;
            border-bottom-right-radius: 4px;
          }
        }

        &.ai-message {
          justify-content: flex-start;

          .message-content {
            background-color: #f0f0f0;
            color: #333;
            border-bottom-left-radius: 4px;

            .loading {
              color: #999;
              font-style: italic;
            }
          }
        }
      }
    }

    .input {
      border-top: 1px solid #e0e0e0;
      padding: 16px 24px;
      background-color: #fff;
      display: flex;
      gap: 12px;
      align-items: flex-end;

      textarea {
        flex: 1;
        min-height: 44px;
        max-height: 200px;
        padding: 12px 16px;
        border: 1px solid #d0d0d0;
        border-radius: 8px;
        font-size: 14px;
        font-family: inherit;
        resize: none;
        outline: none;
        line-height: 1.5;

        &:focus {
          border-color: #4a9eff;
        }

        &:disabled {
          background-color: #f5f5f5;
          cursor: not-allowed;
        }

        &::placeholder {
          color: #999;
        }
      }

      button {
        padding: 12px 24px;
        background-color: #4a9eff;
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        cursor: pointer;
        transition: background-color 0.2s;
        height: 44px;

        &:hover:not(:disabled) {
          background-color: #3a8eef;
        }

        &:disabled {
          background-color: #ccc;
          cursor: not-allowed;
        }
      }
    }
  }
}
